<template>
  <div>
    <el-table :data="userInfo" border style="width: 100%">
      <el-table-column
        fixed
        prop="userName"
        label="姓名"
        width="120"
        v-model="userInfo.userName"
      >
      </el-table-column>
      <el-table-column
        prop="userAcc"
        label="账户名"
        width="120"
        v-model="userInfo.userAcc"
      >
      </el-table-column>
      <el-table-column
        prop="userPhone"
        label="联系电话"
        width="130"
        v-model="userInfo.userPhone"
      >
      </el-table-column>
      <el-table-column
        prop="userSex"
        label="性别"
        width="100"
        v-model="userInfo.userSex"
      >
      </el-table-column>
      <el-table-column
        prop="userAdd"
        label="邮箱"
        width="180"
        v-model="userInfo.userAdd"
      >
      </el-table-column>
      <el-table-column
        prop="userIdCard"
        label="身份证号"
        width="230"
        v-model="userInfo.userIdCard"
      >
      </el-table-column>
      <el-table-column
        prop="income"
        label="收入"
        width="120"
        v-model="userInfo.income"
      >
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180">
        <template>
          <el-button type="text" size="small" @click="completeEdit(userId)"
            >完善信息</el-button
          >
          <el-button type="text" size="small" @click="pwdEdit(userId)"
            >修改密码</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- -----------------------修改用户信息dialog------------------------------------------------------ -->
    <el-dialog
      title="完善个人信息"
      :visible.sync="dialog.updateshow"
      width="30%"
    >
      <el-form :model="updateForm"  status-icon
        ref="form"
        :rules="rules">
        <el-form-item label="账号" :label-width="formLabelWidth" prop="userAcc">
          <el-input v-model="updateForm.userAcc" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth" prop="userName">
          <el-input v-model="updateForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" :label-width="formLabelWidth" prop="userPhone">
          <el-input
            v-model="updateForm.userPhone"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth" prop="userAdd">
          <el-input v-model="updateForm.userAdd" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码" :label-width="formLabelWidth" prop="userIdCard">
          <el-input
            v-model="updateForm.userIdCard"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="userSex">
          <el-input v-model="updateForm.userSex" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="updateUser('updateForm')">提 交</el-button>
      </div>
    </el-dialog>

    <!-- -----------------------修改密码dialog------------------------------------------------------ -->
    <el-dialog title="更改密码" :visible.sync="dialog.passwordShow" width="30%">
      <el-form
        :model="updatePwdForm"
        status-icon
        ref="updatePwdForm"
        :rules="rules"
      >
        <el-form-item
          label="请输入新密码"
          :label-width="formLabelWidth"
          prop="userPassword"
        >
          <el-input
            type="password"
            v-model="updatePwdForm.userPassword"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item
          label="确认密码"
          :label-width="formLabelWidth"
          prop="checkUserPassword"
        >
          <el-input
            type="password"
            v-model="updatePwdForm.checkUserPassword"
            autocomplete="off"
            show-password
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialog.passwordShow = false">取 消</el-button>
        <el-button type="primary" @click="updatePasswordo()"
          >提 交</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
  </div>
</template>


<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.updatePwdForm.checkUserPassword !== "") {
          this.$refs.updatePwdForm.validateField("checkUserPassword");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.updatePwdForm.userPassword) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };


    return {
      dialog: {
        updateshow: false,
        passwordShow: false,
      },
      updateForm: {
        userAcc:"",
        userName:"",
        userPhone:"",
        userAdd:"",
        userIdCard:"",
        userSex:"",
      },
      updatePassword:{},

      updatePwdForm: {
        userPassword: "",
        checkUserPassword: "",
      },
      userId: this.$store.getters.obtainUserInfo.user.userId,
      userInfo: [],

      rules: {
        userPassword: [{ validator: validatePass, trigger: "blur" }],
        checkUserPassword: [{ validator: validatePass2, trigger: "blur" }],
        userAcc: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }],
        userName: [
          { required: true, message: '请输入真实姓名', trigger: 'blur' },
          { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }],
        userPhone: [
          { required: true, message: '请输入联系电话'},
          { pattern:/^1[3456789]\d{9}$/, message: '电话号码必须为11位数字'}],
        userSex: [
          { required: true, message: '请输入性别', trigger: 'blur' },
          { min: 1, max:1, message: '请填写男或女', trigger: 'blur' }],
        userAdd: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { message: '请输入正确的邮箱地址', trigger: 'blur' }],
        userIdCard: [
          { required: true, message: '身份证不能为空'},
          { type: 'number', message: '必须填写18位身份证'}]

      },
    };
  },

  methods: {
    //表单校验
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("修改成功!");
        } else {
          console.log("系统异常，请稍后再试!!");
          return false;
        }
      });
    },

    //清空表单数据
    // resetForm(updatePwdForm){
    //   this.$refs[updatePwdForm].resetFileds();
    // },

    //打开完善信息模态框
    completeEdit(userId) {
      this.dialog.updateshow = true;
      this.$axios.get("/users/" + userId).then((res) => {
        this.updateForm = res.data.data.userInfo;
      });
    },
    //打开修改密码模态框
    pwdEdit(userId) {
      this.dialog.passwordShow = true;
    },

    //修改用户信息
    updateUser() {
      this.$axios.put("/users/", this.updateForm).then((res) => {
        if (res.data.code == 200) {
          this.userInfo = res.data.data.updateUser;
          this.$message("提交成功");
          this.dialog.updateshow = false;
        }
      });
    },

    //修改密码
    updatePasswordo() {
      // (this.updatePwdForm = ""),
      this.updatePassword.userId =this.userInfo[0].userId;
       this.updatePassword.userPassword=this.updatePwdForm.checkUserPassword
        this.$axios.post("/users/userid" ,this.updatePassword).then((res) => {
          if (res.data.code == 200) {
            // this.updatePwdForm = res.data.data.newPwd;
            
            this.$message("修改成功");
            this.dialog.passwordShow = false;
          }
        });
    },
  },
  mounted() {
    this.userInfo[0] = this.$store.getters.obtainUserInfo.user;
    // this.loadUser();
  },
};
</script>



